<template>
  <div class="articles">
    <el-card>
      <!-- 搜索和新增按钮 -->
      <el-row>
        <el-col :span="12">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="search"
          >
            <el-form-item label="关键字" prop="keywords">
              <el-input
                v-model="formInline.keywords"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm('search')">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col class="new-skill" :span="12">
          <el-button type="success" icon="el-icon-edit" @click="addSkill"
            >新增技巧</el-button
          >
        </el-col>
      </el-row>
      <!-- /搜索和新增按钮 -->
      <!-- 数据条目 -->
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <i class="el-icon-info" style="color: #8f9298"></i>
            <span class="data-num-text">数据一共&nbsp;{{ count }}&nbsp;条</span>
          </div></el-col
        >
      </el-row>
      <!-- /数据条目 -->
      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#FAFAFA' }"
      >
        <el-table-column prop="id" label="序号" width="100"> </el-table-column>
        <el-table-column label="文章标题" width="400">
          <template slot-scope="scope">
            <span class="title-text">{{ scope.row.title }}</span>
            <span
              v-if="scope.row.videoURL"
              @click="playVideo(scope.row.videoURL)"
              ><i class="el-icon-film film-btn"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column label="录入人">
          <span>超级管理员</span>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | relativeTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              class="edit-text-color"
              round
              @click="previewArticle(scope.row)"
              >预览</el-button
            >
            <el-button
              size="small"
              class="edit-text-color"
              round
              @click="changeStates(scope.row)"
              >{{ scope.row.state === 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              size="small"
              :class="{ 'edit-text-color': scope.row.state === 0 }"
              round
              :disabled="scope.row.state === 1"
              @click="changeArticle(scope.row)"
              >修改</el-button
            >
            <el-button
              size="small"
              :class="{ 'edit-text-color': scope.row.state === 0 }"
              round
              :disabled="scope.row.state === 1"
              @click="removebtn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- /数据表格 -->
      <!-- 底部分页 -->
      <el-row type="flex" justify="end">
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 15, 20]"
            layout="prev,  pager, next,sizes, jumper"
            :total="count"
            :hide-on-single-page="true"
          >
          </el-pagination>
        </div>
      </el-row>
      <!-- /底部分页 -->
    </el-card>
    <!-- 播放视频 -->
    <play-video
      :url="videoUrl"
      v-if="VideoDialog"
      @close="VideoDialog = false"
    />
    <!-- /播放视频 -->
    <!-- 文章预览 -->
    <el-dialog title="预览文章" width="800px" :visible.sync="ArticleDialog">
      <article-details :article="artContent" />
    </el-dialog>
    <!-- /文章预览 -->
    <!-- 新增技巧 -->
    <el-dialog
      title="新增文章"
      width="800px"
      :visible.sync="SkillDialog"
      :close-on-click-modal="false"
    >
      <add-article
        @close="SkillDialog = $event"
        @updateArticle="getArticleList"
        :changeShow="true"
      />
    </el-dialog>
    <!-- /新增技巧 -->
    <!-- 修改文章 -->
    <el-dialog
      title="修改文章"
      width="800px"
      :visible.sync="ChangeDialog"
      :close-on-click-modal="false"
    >
      <add-article
        v-if="ChangeDialog"
        @close="ChangeDialog = $event"
        @updateArticle="getArticleList"
        :title="artTitle"
        :content="artDetails"
        :url="artVideo"
        :artId="artID"
        :changeShow="false"
      />
    </el-dialog>
    <!-- /修改文章 -->
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles'
import PlayVideo from './playVideo.vue'
import ArticleDetails from './articleDetails.vue'
import AddArticle from './addArticle.vue'
export default {
  created () {
    this.getArticleList()
  },
  data () {
    return {
      formInline: {
        keywords: '',
        state: null
      },
      currentPage4: 1,
      tableData: [],
      count: null,
      pageSize: null,
      page: 1,
      VideoDialog: false,
      videoUrl: null,
      ArticleDialog: false,
      artContent: null,
      SkillDialog: false,
      ChangeDialog: false,
      artTitle: '',
      artDetails: '',
      artVideo: '',
      artID: ''
    }
  },
  components: {
    PlayVideo,
    ArticleDetails,
    AddArticle
  },
  methods: {
    onSubmit () {
      // 根据关键字或者状态搜索文章
      this.getArticleList()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getArticleList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getArticleList()
    },
    resetForm (formName) {
      // 重置表单中的内容
      this.$refs[formName].resetFields()
    },
    async getArticleList () {
      // 获取文章列表信息，用于渲染文章表格
      const { data } = await list({
        page: this.page,
        pagesize: this.pageSize,
        keyword: this.formInline.keywords,
        state: this.formInline.state
      })
      console.log(data)
      this.tableData = data.items
      this.count = data.counts
      this.pageSize = data.pagesize
    },
    async removeArticle (id) {
      // 删除文章
      const index = this.tableData.findIndex((item) => item.id === id)
      try {
        await remove(id)
        this.tableData.splice(index, 1)
        // 1.判断数据列表中还有没有数据存在了，有就要判断是从哪一页开始删除的
        if (!this.tableData.length) {
          // 2.数据列表中没有数据存在了
          if (this.page !== 1) {
            // 4.如果不是从第一页开始删除的，页码减一，往前更新
            this.page--
          }
          this.getArticleList()
        } else {
          // 3.用户是从第一页开始删除的，每次删除，重新渲染页面
          this.getArticleList()
        }
        // 如果有数据，正常删除就可以了
        this.$message({
          message: '删除文章成功！',
          type: 'success'
        })
      } catch (err) {
        this.$message({
          message: '删除文章失败，请稍后再试',
          type: 'warning'
        })
      }
    },
    removebtn (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeArticle(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async changeStates (data) {
      // 修改文章的状态
      try {
        await changeState({ id: data.id, state: data.state ? 0 : 1 })
        this.$message({
          message: '修改成功!',
          type: 'success'
        })
        this.getArticleList()
      } catch {
        this.$message({
          message: '修改失败',
          type: 'warning'
        })
      }
    },
    playVideo (videoUrl) {
      // 播放视频
      this.VideoDialog = true
      this.videoUrl = videoUrl
    },
    previewArticle (artContent) {
      // 预览文章
      this.ArticleDialog = true
      this.artContent = artContent
    },
    addSkill () {
      this.SkillDialog = true
    },
    changeArticle (artForm) {
      this.ChangeDialog = true
      this.artTitle = artForm.title
      this.artDetails = artForm.articleBody
      this.artVideo = artForm.videoURL
      this.artID = artForm.id
    }
  }
}
</script>

<style scoped lang="scss">
.articles {
  ::v-deep .cell {
    display: flex;
    margin: 5px 0px;
  }
  .title-text {
    white-space: nowrap;
  }
  .film-btn {
    margin-left: 10px;
    color: #2612ff;
    font-size: 18px;
    cursor: pointer;
  }
  .new-skill {
    display: flex;
    justify-content: flex-end;
  }
  .bg-purple-dark {
    background: #f4f4f5;
  }
  ::v-deep .el-table__header-wrapper {
    border-bottom: 2px solid #e7e7e7;
    box-sizing: border-box;
    margin-top: 15px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    padding-left: 20px;
    .data-num-text {
      font-size: 14px;
      color: #8f9298;
      padding: 10px;
    }
  }
  .block {
    margin-top: 15px;
  }
  .el-button--small,
  .el-button--small.is-round {
    padding: 0;
    border: none;
    font-size: 14px;
  }
  .edit-text-color {
    color: #649dff;
  }
}
</style>
